$(function () {
    layui.use(['table','form'], function () {
        let table = layui.table;
        let form = layui.form;
        table.render({
            elem: '#table',
            height: 450,
            url: '/json_order',
            page: true, //开启分页
            align: 'center',
           async:false,
            cols: [[ //表头
                {field:'checkBox',align: 'center',type:'checkbox',width:'4%'},
                {field: 'id', title: '序号', sort: true,  align: 'center',type: 'number',width: '6%'},
                {field: 'orderId', title: '订单序号', sort: true,  align: 'center',width: '13%'},
                {field: 'name', title: '商品名',  align: 'center',width:'14%' },
                {field: 'username', title: '用户名',  align: 'center',width:'10%' },
                {field: 'address', title: '收货地址',  align: 'center',width: '13%'},
                {field: 'price' ,title: '价格' ,align: "center"},
                {field: 'phone', title: '手机号', align: 'center',width: '9%'},
                {field: 'orderTime', title: '下单时间', align: 'center',width: '13%'},
                {field: 'status', title: '订单状态', align: 'center',width: '9%',templet:
                    function (d){
                    let status = d.status;
                    let option1;
                    let option2;
                    let option3;
                    //这里可以用三目运算符简化但是不会写
                    if(status==="未发货"){
                        option1 = "<option  selected style='color: red'>"+"未发货"+"</option>";
                        option2 = "<option>"+"运输中"+"</option>";
                        option3 = "<option>"+"已完成"+"</option>";
                    }
                    else if(status==="运输中"){
                        option1 = "<option>"+"未发货"+"</option>";
                        option2 = "<option selected>"+"运输中"+"</option>";
                        option3 = "<option>"+"已完成"+"</option>";
                    }
                    else if(status==="已完成"){
                        option1 = "<option >"+"未发货"+"</option>";
                        option2 = "<option>"+"运输中"+"</option>";
                        option3 = "<option selected>"+"已完成"+"</optionselected>";
                    }
                    let formHead = "<form id='form' lay-filter='layui-form'>";
                    let selectHead = "<select id=\"orderSelect\" class=\"orderStatus\" lay-filter='' style='background-color:red;' >";
                    let selectFoot = "</select>";
                    let formFoot = "</form>";
                   return formHead+selectHead+option1+option2+option3+selectFoot+formFoot;
                    }},
                { title:'操作' , align: 'center',width: '5%',templet:function (){
                        return "<button type=\"button\" class=\"layui-btn layui-btn-sm layui-btn-danger\" lay-event='del'>删除</button>";
                    }
                }
            ]],
            limit: 10,  //一页显示10条数据
            parseData: function (res) {
                let result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            },
            done:function (res, curr, count){
         let input = $('.layui-select-title input');
         let length = input.length;
         //遍历所有名字，改变颜色
         for(let i =0;i<length;i++){
             let value = input[i].value;
             if(value==="未发货"){
                 input[i].style.color='red';
             }
             else if(value==='运输中'){
                 input[i].style.color='orange';
             }
             else if (value==='已完成'){
                 input[i].style.color='green';
             }
         }
            },
        });



        //搜索
        $("#searchInput").keydown(function(e) {
            //绑定回车
            if (e.keyCode == '13') {//keyCode=13是回车键
                $('#searchButton').click();
            }
        });
        $('#searchButton').click(function (){
            let content = $('#searchInput').val();
            table.reload('table',{
                url:"/searchAllOrder",
                page: {curr:1},
                where:{
                    "content":content
                }
            })

        })
        

        //删除
        table.on('tool(table)',function (obj){
            console.log(document.getElementById('orderSelect'));
            if(obj.event==='del'){
                layer.confirm('是否删除所选中行?', {
                    icon: 3,
                    title:'提示',
                }, function(index){
                    layer.msg('删除成功', {
                        time: 1000
                    });
                    $.get({
                        url: "deleteOrder",
                        data: {
                            "id":obj.data.id
                        },
                        success:function (data){
                            if (data === 'success'){
                                layer.msg('删除成功', {
                                    time: 1000,
                                    end:function (){
                                        table.reload('table');
                                        layer.close(index);
                                    }
                                });
                            }
                            else{
                                layer.msg('删除失败', {
                                    time: 1000,
                                })
                            }
                        },
                        error:function (data){
                            layer.msg('删除失败', {
                                time: 1000,
                            })
                        }
                    });
                });
            }
        })

        form.on('select',function (obj) {
            let input = $('.layui-select-title input');
            let length = input.length;
            //遍历所有名字，改变颜色
            for (let i = 0; i < length; i++) {
                let value = input[i].value;
                if (value === "未发货") {
                    input[i].style.color = 'red';
                } else if (value === '运输中') {
                    input[i].style.color = 'orange';
                } else if (value === '已完成') {
                    input[i].style.color = 'green';
                }
            }

            //获取所在行对象
            let tr = obj.othis.parents('tr');
            let id = tr.children().eq(1).text();
            let status = obj.value;
            $.ajax({
                type:"put",
                url:"editOrder",
                data:{"id":id,
                    "status":status},
                success:function (){
                       layer.msg("编辑成功",{
                           time:500
                       })
                }
            })



        })

    });
})